<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: DataTable Control (beta): Server-side Pagination and Sorting, with Browser History Manager</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}

</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/json/json-min.js"></script>
<script type="text/javascript" src="../../build/history/history-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
#dt-pag-nav { margin-bottom:1ex; } /* custom pagination UI */
#dt-pag-nav a {
    color: #00c;
    text-decoration: underline;
}
#yui-history-iframe {
  position:absolute;
  top:0; left:0;
  width:1px; height:1px; /* avoid scrollbars */
  visibility:hidden;
}
</style>

<!--end custom header content for this example-->


</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em>
			<a href="http://developer.yahoo.com">Yahoo! Developer Network Home</a> <i> - </i>	
			<a href="http://help.yahoo.com/help/us/ysearch">Help</a>
			</em>
		</p>
		<form action="http://search.yahoo.com/search"><label for="ygsp">YDN Site Search</label> 
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="fr" type="hidden" value="ush-myweb">
		<input id="ygsp" name="va" size="22"> 
		<input type="submit" value="Search" class="ygbt"></form>
	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" width="378" height="28"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: DataTable Control (beta): Server-side Pagination and Sorting, with Browser History Manager</h1></div>
</div>
<div id="bd">
	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">
	
	<div class="promo">
	<h1>DataTable Control (beta): Server-side Pagination and Sorting, with Browser History Manager</h1>
	
	<div class="exampleIntro">
	<p>This example combines server-side pagination and sorting with the Browser
History Manager for managing states.</p>
			
	</div>	
					
	<div class="example-container module ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="dt_server_pag_sort_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->		
		</div>		<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<iframe id="yui-history-iframe" src="assets/html/blank.html"></iframe>
<input id="yui-history-field" type="hidden">

<div id="dt-pag-nav"></div>
<div id="serverintegration"></div>

<script type="text/javascript">
(function () {
    var History = YAHOO.util.History,
        myPaginator,  // to hold the Paginator instance
        myDataSource, // to hold the DataSource instance
        myDataTable;  // to hold the DataTable instance

    // function to generate a query string for the DataSource.  Also used
    // as the state indicator for the History Manager
    var generateStateString = function (start,key,dir) {
        start = start || 0;
        key   = key || 'id';
        dir   = dir || 'asc';
        return "results=15&startIndex="+start+"&sort="+key+"&dir="+dir;
    };

    // function to extract the key values from the state string
    var parseStateString = function (state) {
        return {
            results    : 15,
            startIndex : /\bstartIndex=(\d+)/.test(state) ? parseInt(RegExp.$1) : 0,
            sort       : /\bsort=(\w+)/.test(state)       ? RegExp.$1 : 'id',
            dir        : /\bdir=(\w+)/.test(state)        ? RegExp.$1 : 'asc'
        };
    };

    // function used to intercept pagination requests
    var handlePagination = function (state,datatable) {
        var sortedBy  = datatable.get('sortedBy');

        var newState = generateStateString(
                            state.recordOffset,
                            sortedBy.key,
                            sortedBy.dir);

        History.navigate("myDataTable",newState);
    };

    // function used to intercept sorting requests
    var handleSorting = function (oColumn) {
        // Which direction
        var sDir = "asc";

        // Already sorted?
        if(oColumn.key === this.get("sortedBy").key) {
            sDir = (this.get("sortedBy").dir === "asc") ?
                    "desc" : "asc";
        }

        var newBookmark = generateStateString(0, oColumn.key, sDir);

        YAHOO.util.History.navigate("myDataTable", newBookmark);
    };

    var handleHistoryNavigation = function (state) {
        // Create a payload to pass through the DataSource request to the
        // handler
        var parsed = parseStateString(state);

        // Use the DataTable's baked in server-side pagination handler
        myDataSource.sendRequest(state,{
                success  : myDataTable.onDataReturnSetRows,
                failure  : myDataTable.onDataReturnSetRows,
                scope    : myDataTable
        });
    };

    var initialState = History.getBookmarkedState('myDataTable') ||
                       generateStateString(0,'id','asc');

    History.register('myDataTable',initialState, handleHistoryNavigation);

    History.onReady(function() {
        // Pull the state from the History Manager, or default from the
        // initial state.  Parse the state string into an object literal.
        var initialRequest = History.getCurrentState('myDataTable') ||
                             initialState,
            state          = parseStateString(initialRequest);

        // Create the DataSource
        myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
            resultsList: "records",
            fields: ["id","name","date","price"],
            metaFields: {
                totalRecords: "totalRecords",
                paginationRecordOffset : "startIndex",
                sortKey: "sort",
                sortDir: "dir"
            }
        };

        // Column definitions
        var myColumnDefs = [
            {key:"id", label:"ID", sortable:true},
            {key:"name", label:"Name", sortable:true},
            {key:"date", label:"Date", sortable:true},
            {key:"price", label:"Price", sortable:true}
        ];

        // Create the DataTable configuration and Paginator using the state
        // information we pulled from the History Manager
        myPaginator = new YAHOO.widget.Paginator({
            rowsPerPage : state.results,
            recordOffset : state.startIndex,
            containers : ['dt-pag-nav'],
            template : "{PreviousPageLink} {CurrentPageReport} {NextPageLink}",
            pageReportTemplate : "Showing items {startIndex} - {endIndex} of {totalRecords}"
        });

        var myConfig = {
            paginator : myPaginator,
            paginationEventHandler : handlePagination,
            // generateRequest : generateStateString, // moot
            sortedBy : {
                key : state.sort,
                dir : state.dir
            },
            initialRequest : initialRequest
        };

        // Instantiate DataTable
        myDataTable = new YAHOO.widget.DataTable(
            "serverintegration", // The dom element to contain the DataTable
            myColumnDefs,        // What columns will display
            myDataSource,        // The DataSource for our records
            myConfig             // Other configurations
        );

        // Listen to header link clicks to sort the column
        myDataTable.subscribe('theadCellClickEvent', myDataTable.onEventSortColumn);

        // Override the DataTable's sortColumn method with our intercept handler
        myDataTable.sortColumn = handleSorting;
        
        // Add the example objects to the YAHOO.example namespace for inspection
        YAHOO.example.ServerIntegration = {
            myPaginator  : myPaginator,
            myDataSource : myDataSource,
            myDataTable  : myDataTable
        };
    });

    YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
})();
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">Code for this example</h2>

<p>This example contacts a server side script to get the records appropriate for display in the DataTable according to the requested sort order and page.  Additionally, each change of page or sort order will be added to the <a href="http://developer.yahoo.com/yui/history/">Browser History Manager</a>, allowing bookmarking and the use of the browser's back/forward buttons to navigate through states of the DataTable.</p>

<p>The server-side script delivering the DataTable's records will send the data in the following JSON format:</p>

<textarea name="code" class="HTML" cols="60" rows="1">{"recordsReturned":25,
    "totalRecords":1397,
    "startIndex":0,
    "sort":null,
    "dir":"asc",
    "records":[
        {"id":"0",
        "name":"xmlqoyzgmykrphvyiz",
        "date":"13-Sep-2002",
        "price":"8370",
        "number":"8056",
        "address":"qdfbc",
        "company":"taufrid",
        "desc":"pppzhfhcdqcvbirw",
        "age":"5512",
        "title":"zticbcd",
        "phone":"hvdkltabshgakjqmfrvxo",
        "email":"eodnqepua",
        "zip":"eodnqepua",
        "country":"pdibxicpqipbsgnxyjumsza"},
        ...
    ]
}
</textarea>

<h2>The markup</h2>

<textarea name="code" class="HTML" cols="60" rows="1">
<iframe id="yui-history-iframe" src="assets/html/blank.html"></iframe>
<input id="yui-history-field" type="hidden">

<div id="dt-pag-nav"></div>
<div id="serverintegration"></div>
</textarea>

<h2>CSS</h2>
<p>The Browser History Manager markup requires an iframe to support IE6.  This is hidden per the recommendation.</p>

<textarea name="code" class="CSS" cols="60" rows="1">
#yui-history-iframe {
  position:absolute;
  top:0; left:0;
  width:1px; height:1px; /* avoid scrollbars */
  visibility:hidden;
}
</textarea>

<h2>Workflow</h2>
<p>To inject the Browser History Manager into DataTable pagination and sorting, we need to create a few custom functions and insert them into the normal flow of operations.  Here's a diagram of how the code below will operate (note the methods in floating boxes are our custom functions):</p>
<img src="assets/images/dt_history_flow.png" alt="Flowchart of the DataTable interaction with BHM updating">

<h2>Javascript</h2>

<p>The Browser History Manager remembers &quot;states&quot;.  For this example, we'll use the query string sent to the server script as the state indicator.  First we create a couple functions to generate and parse the query/state string, then set up the <code>onStateChange</code> function for the BHM to use when calls to <code>History.navigate(...)</code> are made.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
(function () {
    var History = YAHOO.util.History,
        myPaginator,  // to hold the Paginator instance
        myDataSource, // to hold the DataSource instance
        myDataTable;  // to hold the DataTable instance

    // function to generate a query string for the DataSource.  Also used
    // as the state indicator for the History Manager
    var generateStateString = function (start,key,dir) {
        start = start || 0;
        key   = key || 'id';
        dir   = dir || 'asc';
        return "results=15&startIndex="+start+"&sort="+key+"&dir="+dir;
    };

    // function to extract the key values from the state string
    var parseStateString = function (state) {
        return {
            results    : 15,
            startIndex : /\bstartIndex=(\d+)/.test(state) ? parseInt(RegExp.$1) : 0,
            sort       : /\bsort=(\w+)/.test(state)       ? RegExp.$1 : 'id',
            dir        : /\bdir=(\w+)/.test(state)        ? RegExp.$1 : 'asc'
        };
    };

    // function to handle onStateChange events from Browser History Manager
    var handleHistoryNavigation = function (state) {
        // Create a payload to pass through the DataSource request to the
        // handler
        var parsed = parseStateString(state);

        // Use the DataTable's baked in server-side pagination handler
        myDataSource.sendRequest(state,{
                success  : myDataTable.onDataReturnSetRows,
                failure  : myDataTable.onDataReturnSetRows,
                scope    : myDataTable
        });
    };

    // Support users visiting the page for the first time or from a
    // saved bookmark.
    var initialState = History.getBookmarkedState('myDataTable') ||
                       generateStateString(0,'id','asc');

    // Register a 'myDataTable' module in the BHM, indicating this session's
    // initial state and the callback to handle onStateChange events.
    History.register('myDataTable',initialState, handleHistoryNavigation);
</textarea>

<p>To facilitate the Browser History Manager remembering pagination and sorting states, we'll need to use custom pagination and sorting handlers.  Each will generate a new state and simply call the BHM's <code>navigate</code> method.  The <code>onStateChange</code> handler will take over from there.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
    // function used to intercept pagination requests
    var handlePagination = function (state,datatable) {
        var sortedBy  = datatable.get('sortedBy');

        var newState = generateStateString(
                            state.recordOffset,
                            sortedBy.key,
                            sortedBy.dir);

        History.navigate("myDataTable",newState);
    };

    // function used to intercept sorting requests
    var handleSorting = function (oColumn) {
        // Which direction
        var sDir = "asc";

        // Already sorted?
        if(oColumn.key === this.get("sortedBy").key) {
            sDir = (this.get("sortedBy").dir === "asc") ?
                    "desc" : "asc";
        }

        var newBookmark = generateStateString(0, oColumn.key, sDir);

        YAHOO.util.History.navigate("myDataTable", newBookmark);
    };
</textarea>

<p>Finally, we create the DataTable instance and the supporting class instances in the History Manager's <code>onReady</code> handler.  This guarantees that whether users arrive at the page fresh, from a bookmark, or from navigating via the browser's back/forward buttons, the DataTable will display the appropriate state.</p>
<p>Note the DataSource is configured with a number of <code>metaFields</code>, which are processed by the DataTable to automatically update sorting and pagination information.  See the note on <a href="http://developer.yahoo.com/yui/datatable/#magic_meta">magic meta</a> in the DataTable docs for more information.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
    History.onReady(function() {
        // Pull the state from the History Manager, or default from the
        // initial state.  Parse the state string into an object literal.
        var initialRequest = History.getCurrentState('myDataTable') ||
                             initialState,
            state          = parseStateString(initialRequest);

        // Create the DataSource
        myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
            resultsList: "records",
            fields: ["id","name","date","price"],
            metaFields: {
                totalRecords: "totalRecords",
                paginationRecordOffset : "startIndex",
                sortKey: "sort",
                sortDir: "dir"
            }
        };

        // Column definitions
        var myColumnDefs = [
            {key:"id", label:"ID", sortable:true},
            {key:"name", label:"Name", sortable:true},
            {key:"date", label:"Date", sortable:true},
            {key:"price", label:"Price", sortable:true}
        ];

        // Create the DataTable configuration and Paginator using the state
        // information we pulled from the History Manager
        myPaginator = new YAHOO.widget.Paginator({
            rowsPerPage : state.results,
            recordOffset : state.startIndex,
            containers : ['dt-pag-nav'],
            template : "{PreviousPageLink} {CurrentPageReport} {NextPageLink}",
            pageReportTemplate : "Showing items {startIndex} - {endIndex} of {totalRecords}"
        });

        var myConfig = {
            paginator : myPaginator,
            paginationEventHandler : handlePagination,
            // generateRequest : generateStateString, // moot
            sortedBy : {
                key : state.sort,
                dir : state.dir
            },
            initialRequest : initialRequest
        };

        // Instantiate DataTable
        myDataTable = new YAHOO.widget.DataTable(
            "serverintegration", // The dom element to contain the DataTable
            myColumnDefs,        // What columns will display
            myDataSource,        // The DataSource for our records
            myConfig             // Other configurations
        );

        // Listen to header link clicks to sort the column
        myDataTable.subscribe('theadCellClickEvent', myDataTable.onEventSortColumn);

        // Override the DataTable's sortColumn method with our intercept handler
        myDataTable.sortColumn = handleSorting;
        
        // Add the example objects to the YAHOO.example namespace for inspection
        YAHOO.example.ServerIntegration = {
            myPaginator  : myPaginator,
            myDataSource : myDataSource,
            myDataTable  : myDataTable
        };
    });

    YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
})();
</textarea>
				</div>
				<div class="yui-u">
						<div id="loggerModule" class="yui-skin-sam">
						<h3 class="firstContent">YUI Logger Output:</h3>
								<div id="loggerDiv"></div>
							<div id="loggerGloss">
								<p><strong>Note:</strong> You are viewing this example in debug mode with logging enabled.  This can significantly slow performance.</p>
	
								<p class="loggerButton"><span id="loggerLink"><span class="first-child"><a href="dt_server_pag_sort.html">Reload with logging<br />and debugging disabled.</a></span></span></p>
							</div>
						</div>
					
				
					<div id="examples">
						<h3>DataTable Control (beta) Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../datatable/dt_basic.html'>Basic Example</a></li><li><a href='../datatable/dt_enhanced.html'>Progressive Enhancement</a></li><li><a href='../datatable/dt_formatting.html'>Custom Cell Formatting</a></li><li><a href='../datatable/dt_nestedheaders.html'>Nested Headers</a></li><li><a href='../datatable/dt_xhrjson.html'>JSON Data Over XHR</a></li><li><a href='../datatable/dt_xhrpostxml.html'>XML Data Over XHR With POST</a></li><li><a href='../datatable/dt_xhrtext.html'>Textual Data Over XHR</a></li><li><a href='../datatable/dt_xhrlocalxml.html'>Local XML Data</a></li><li><a href='../datatable/dt_rowadddelete.html'>Adding and Deleting Rows</a></li><li><a href='../datatable/dt_clientpagination.html'>Client-side Pagination</a></li><li><a href='../datatable/dt_clientsorting.html'>Client-side Sorting</a></li><li><a href='../datatable/paginator_datatable_serverpaging.html'>Server-side Pagination</a></li><li><a href='../datatable/dt_serversorting.html'>Server-side Sorting</a></li><li class='selected'><a href='../datatable/dt_server_pag_sort.html'>Server-side Pagination and Sorting, with Browser History Manager</a></li><li><a href='../datatable/dt_fixedscroll.html'>XY-scrolling, Y-scrolling, and X-scrolling</a></li><li><a href='../datatable/dt_rowselect.html'>Row Selection</a></li><li><a href='../datatable/dt_cellselect.html'>Cell Selection</a></li><li><a href='../datatable/dt_cellediting.html'>Inline Cell Editing</a></li><li><a href='../datatable/dt_contextmenu.html'>Context Menu Integration</a></li><li><a href='../datatable/dt_colshowhide.html'>Showing, Hiding, and Reordering Columns.</a></li><li><a href='../datatable/dt_highlighting.html'>Highlighting Cells, Rows, or Columns</a></li><li><a href='../datatable/dt_complex.html'>Complex Example of Multiple Features</a></li><li><a href='../datatable/dt_autocomplete.html'>Datatable with Autocomplete</a></li><li><a href='../datatable/dt_skinning.html'>Skinning Model</a></li><li><a href='../datatable/pg_paginator_exhibition.html'>Configuring the Paginator</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager (beta))</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More DataTable Control (beta) Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/datatable/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_datatable.html">API Documentation</a></li>
                            
                            
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/datatable.pdf">Cheat Sheet PDF</a> (external)</li></ul>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts (experimental)</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie (beta)</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="selected "><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable (beta)</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper (beta)</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager (beta)</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler (beta)</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer (beta)</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize (beta)</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor (beta)</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector (beta)</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader (beta)</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
